<template>
  <div style="height: 400px">
      <div style="font-size: 15px;font-weight: bolder">{{`欠款总额:${total}`}}</div>
      <div style="font-size: 15px;font-weight: bolder">{{`已还总额:${(total - remain).toFixed(2)}`}}</div>
    <div ref="progressChartRef" class="chart-container"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'DonutProgress',
  props: {
    total: Number,
    remain: Number,
    // 进度百分比 (0-100)
    percentage: {
      type: Number,
      required: true,
    },
    // 圆环大小
    size: {
      type: Number,
      default: 300
    },
    // 主标题
    title: {
      type: String,
      default: '还款进度'
    },
    // 副标题
    subtitle: {
      type: String,
      default: ''
    },
    // 已完成部分颜色
    completedColor: {
      type: String,
      default: '#409EFF'
    },
    // 未完成部分颜色
    remainingColor: {
      type: String,
      default: '#E5E9F2'
    },
    // 文本颜色
    textColor: {
      type: String,
      default: '#303133'
    }
  },
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    this.destroyChart();
  },
  watch: {
    percentage: {
      handler() {
        this.chart.dispose();
        this.initChart()
      }
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.progressChartRef, null, {
        width: this.size,
        height: this.size
      });

      const option = this.getChartOption();
      this.chart.setOption(option);

      window.addEventListener('resize', this.resizeChart);
    },
    getChartOption() {
      return {
        color: [
          '#364F6B', '#3FC1C9', '#FC5185', '#20639B', '#F6D55C'
        ],
        tooltip: {
          trigger: 'item',
          formatter: '({d}%)'
        },
        series: [
          {
            type: 'pie',
            radius: ['75%', '90%'],
            center: ['50%', '50%'],
            startAngle: 90,
            clockwise: false,
            hoverAnimation: false,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: this.percentage,
                itemStyle: {
                  color: this.completedColor
                }
              },
              {
                value: 100 - this.percentage,
                itemStyle: {
                  color: this.remainingColor
                }
              }
            ]
          },
          {
            type: 'pie',
            radius: ['0%', '65%'],
            center: ['50%', '50%'],
            label: {
              show: true,
              position: 'center',
              formatter: `{title|${this.title}}\n{percent|${this.percentage.toFixed(2)}%}\n{subtitle|${this.subtitle}}`,
              rich: {
                title: {
                  fontSize: 14,
                  color: this.textColor,
                  padding: [0, 0, 5, 0]
                },
                percent: {
                  fontSize: 24,
                  fontWeight: 'bold',
                  color: this.textColor,
                  padding: [0, 0, 5, 0]
                },
                subtitle: {
                  fontSize: 12,
                  color: '#909399'
                }
              }
            },
            data: [
              {
                value: 1,
                itemStyle: {
                  color: 'transparent'
                }
              }
            ]
          }
        ]
      };
    },
    updateChart() {
      console.log('....12121')
      console.log(this.percentage);
      if (this.chart) {
        console.log(this.chart);
        this.chart.setOption({
          series: [
            {
              data: [
                { value: this.percentage },
                { value: 100 - this.percentage }
              ]
            }
          ]
        });
      }
    },
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    },
    destroyChart() {
      if (this.chart) {
        window.removeEventListener('resize', this.resizeChart);
        this.chart.dispose();
        this.chart = null;
      }
    }
  }
};
</script>

<style scoped>
.chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
